<template>
	<div class="admin-support-index" :style="`height: ${documentHeight}px;`">
		<div class="box-left">
			<supportLeft ref="support_left" @change="selectItem"></supportLeft>
		</div>
		<div class="box-right" v-loading="loading">
			<supportRight ref="supportRight" @supportRightChange="supportRightChange" v-show="!loading"></supportRight>
		</div>
	</div>
</template>
<script>
	import supportLeft from './widget/support-left.vue'
	import supportRight from './widget/support-right.vue'
	export default {
		components: {
			supportLeft,
			supportRight
		},
		data() {
			return {
				documentHeight: 0,
				loading: false
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				var h = document.documentElement.clientHeight || document.body.clientHeight
				this.documentHeight = h - 80
			},
			selectItem(data, leftModel) {
				this.loading = true
				this.$refs.supportRight.init(data, leftModel)
				var this_ = this
				setTimeout(() => {
					this_.loading = false
				}, 1000)
			},
			supportRightChange() {
				this.$refs.support_left.init()
			}
		}
	}
</script>
<style lang="scss">
	@import "./var.scss";
</style>